<template>
    <div>
        <div class="title">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <span>设置</span>
        </div>
        <div class="avatar">
            <van-uploader v-model="fileList" :after-read="afterRead" accept="image/png, image/jpeg"
                          :max-size="500 * 1024" @oversize="onOversize"/>
            <div>点击上传图片</div>
        </div>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="nickname"
                    name="nickname"
                    label="昵称"
                    placeholder="昵称"
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="again"
                    type="password"
                    name="again"
                    label="再次确认密码"
                    placeholder="再次确认密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="tel"
                    type="text"
                    name="tel"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "Resetting",
        data() {
            return {
                userInfo: this.$store.state.userInfo,
                nickname: '',
                password: '',
                again: '',
                tel: '',
                fileList: [],
                avatarUrl: null
            }
        },
        methods: {
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(file);
                console.log(this.fileList)
                this.avatarUrl = file.content
                // console.log(file.content)
            },
            async onSubmit(values) {
                console.log(values.nickname)
                await this.$post('auth/updateInfo',{
                    // filePath: this.avatarUrl,
                    // password: values.password,
                    // nickname: values.nickname,
                    // mobile: values.tel

                    filePath: this.avatarUrl,
                    password: '123',
                    nickname: values.nickname,
                    mobile: '12345678901'
                })
                    .then(res => {
                        console.log(res)
                    })
            },
            onOversize(file) {
                console.log(file)
                Toast('文件大小不能超过 5MB');
            }
        }
    }
</script>

<style lang="less" scoped>
  .title {
    position: relative;
    width: 375px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;

    >span {
      margin-left: 50px;
    }
    .van-icon-arrow-left {
      position: absolute;
      left: 0px;
      line-height: 45px;
      margin-left: 11px;
      font-size: 18px;
    }
  }

    .avatar {
      margin-top: 14px;
      text-align: center;
      img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
    }
  .van-uploader__upload {
    background-color: #fff !important;
  }
</style>
